// web/src/app/learn/(dashboard)/(routes)/(root)/_components/info-card.tsx
import React from 'react';
import {LucideIcon} from "lucide-react";
import IconBadge from "@/components/learn/icon-badge";

interface Props {
    label: string
    icon: LucideIcon
    variant?: 'default' | 'success'
    numberOfItems: number
}

const InfoCard = ({
                      variant, label, icon, numberOfItems
                  }: Props) => {

    return (
        <div className={`border rounded-md flex items-center gap-x-2 p-3`}>
            <IconBadge
                variant={variant}
                icon={icon}
            />
            <div className={``}>
                <p className={`font-medium`}>
                    {label}
                </p>
                <p className={`text-gray-500 text-sm`}>
                    {numberOfItems} {numberOfItems === 1 ? 'Course' : 'Courses'}
                </p>
            </div>
        </div>
    );
};

export default InfoCard;